<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title id="domTitle"></title>
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}" />
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{/js/booklist/bookInfo_css.css}"/>
		
		<script th:src="@{/js/jquery.js}"></script>
		<script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
		<script th:src="@{/js/vue.js}" type="text/javascript" ></script>
		
	</head>
	<body>
		<div id="app" class="container-fluid">
			
			<div class="row">
				<div class="col-md-2" >
					<div class="row">
						<div class="col-md-6" style="margin: 0;">
							<img th:src="|/${session.user.headImg}|" class="author-headImg">
						</div>
						<div class="col-md-6" style="margin-top:10px ;margin-left: 0rem; height: 5rem; 
													line-height: 20px;">
							<label class="ziliao" th:text="|名字:${session.user.username}|"></label><br>
							<label class="ziliao" th:text="|性别:${session.user.gender}|"></label><br>
							<label class="ziliao" th:text="|指数:${session.user.level}|"></label><br>
							<label v-show="false" id="userId" th:text="${session.user.id}"></label>
						</div>
					</div>
				</div>
				<div class="col-md-10" style="margin-top: 10px;">
					<a href="index.html" style="margin-left: 70%; font-size: small;">主页</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">投稿</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">联系我们</a>
					<a href="index.html" style="margin-left: 20px;font-size: small;">支持我们</a>
					<a style="margin-left: 1.25rem; font-size: small;" v-show="!pageInfo.show" href="">加入我们</a>
					<a style="margin-left: 1.25rem; font-size: small;" v-show="pageInfo.show" th:href="@{'http://localhost:8080/author/logoff'}">退出登录</a>
				</div>
			</div>
			
			<div class="row" style="margin-top: 100px;">
				<div class="col-md-2 asider">
					<div class="row" style="width: 100%;">
						<ul>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/feel.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/pen.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="li">
								<img class="img-circle" th:src="@{/img/booklist/test.jpg}" style="width: 70px; height: 70px;">
							</li>
							<li class="last_li">
								<img class="img-circle" th:src="@{/img/booklist/else.jpg}" style="width: 70px; height: 70px;">
							</li>
						</ul>
					</div>
				</div>
				<div class="col-md-10 content" style="margin-left: 0;">
					<div class="row">
						<div class="col-md-4 col-md-offset-4" style="text-align: center;">
							<h4 th:text="${session.poet.name}"></h4>
							<h6 style="float: right;" th:text="|作者:${session.user.username} &nbsp &nbsp 类型:${session.poet.getType()}|"></h6>
							<div class="poet-content" th:text="${session.poet.getTxt()}"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-10 col-md-offset-1 Comment">
				<table class="table table-hover table-striped table-condensed">
					<thead>
						<tr v-show="false">
							<td>material</td>
							<td>commentContent</td>
							<td>operation</td>
						</tr>
					</thead>
					<tbody>
						<tr th:each="content : ${session.contents}">

							<td class="comment-td" style="vertical-align:middle;text-align:right;">
								<img th:href="@{'http://localhost:8080/author/visit?goalId='+ ${content.userId}}" th:src="|/${content.userImg}|"  class="useImg">
							</td>
							<td class="comment-td" style="vertical-align:middle;">
								<div th:text="${content.commentContent}"></div>
							</td>
							<td class="comment-td" style="text-align: center;">
								
								<img th:src="@{/img/bookInfoImg/up.jpg}" class="img-circle opr-img" >
								&nbsp &nbsp 
								<img th:src="@{/img/bookInfoImg/down.jpg}" class="img-circle opr-img" >

							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		
		
		var poetInfo = {
			poetTitle : "",
			authorName :"",
			poetType :"",
			poetContent:""
		}
		
		
		var comment = {
			useImg:'',
			userName:'',
			commentContent:'',
			
		}
		
		var myselfIfo ={
			userId:0,
			name:'',
			gender:'',
			level:0
		}
		
		var pageInfo ={
			show:true
		}	
			
		var vm = new Vue({
			el:'#app',
			data(){
				return{
					pageInfo:pageInfo,
					myselfIfo:myselfIfo,
					poetInfo:poetInfo,
					comment:comment
				}
			}
		})
	</script>
</html>
